import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { observer } from 'mobx-react';

import { Select, message } from 'antd';
import OperModal from '@/component/common/OperModal';
const LabelItem = OperModal.LabelItem;

import MModal from '@/component/common/MModal';

const Option = Select.Option;

import StoreListMini from '@/store/StoreListMini';

import ApiHelper from '@/store/ApiHelper';
import { member_change_store } from '@/constants/ApiTypes';

@observer class BrokerChangeStoreModal extends Component {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        visible: PropTypes.bool,
        onClose: PropTypes.func.isRequired,
        broker_name: PropTypes.string.isRequired,
        broker_id: PropTypes.any.isRequired,
        store_name: PropTypes.string.isRequired
    };
    defaultState = {
        store_id: ''
    };
    state = this.defaultState;
    componentWillReceiveProps(nextProps) {
        if (nextProps.visible) {
            this.setState(this.defaultState);
        }
    }
    submit = async () => {
        const { store_id } = this.state;
        const { broker_id } = this.props;
        if (store_id == '') return message.warn('请选择新的门店！', 1.5);

        const data = { org_uid: broker_id, new_org_id: store_id };
        const result = await ApiHelper.requestPost(member_change_store, data);
        if (result.status) {
            MModal.success({ title: '操作成功', content: '操作成功', duration: 1.5 });
            this.props.onClose(true);
        } else {
            MModal.success({ title: '操作失败', content: result.info });
        }
    };
    selectStore = value => {
        this.setState({ store_id: value });
    };
    render() {
        const { visible, onClose, broker_name, store_name } = this.props;
        const { submit, selectStore } = this;
        const storeListMini = StoreListMini.info;

        let storeOptionList = storeListMini.map((val, index) => {
            return <Option key={index} value={`${val.store_id}`}>{val.store_name}</Option>;
        });
        return (
            <OperModal visible={visible} onClose={onClose} title="门店转移" width={520} height={140} onOk={submit}>
                <LabelItem label={`将${broker_name}从${store_name}转移到`}>
                    <Select placeholder="选择门店" style={{ width: 150 }} onChange={selectStore}>
                        {storeOptionList}
                    </Select>
                </LabelItem>
            </OperModal>
        );
    }
}

export default BrokerChangeStoreModal;